<template lang="pug">
  #container.container.overview.theme-app(@touchmove="handleDragPrevent", @touchstart="toggleZoom")
    Loading(v-if='getLoadImage && isShowLoading', @closeLoading='closeLoading', pagetype="overview")
    Effect(v-if="isShowEffect", :effect="isShowEffect")
    //- audio(:src='getMusic', preload, loop, ref='ovvAudio')
    .audio-icon(v-if="getMusic", @click="toggleMusic")
      i.iconfont(:class="{'icon-jingyin': !isMute, 'icon-music1': isMute}")

    .start-pic(v-if="getStartPic && isShowPic", @click="hideStartPic(true)")
      .img-box
        img(:src="getStartPic", alt="")
    .ctrl-box
      .icon(:class="{'active': isBig}", @touchstart="handleZoomIn")
        i.iconfont.icon-zuidahua
      .icon(:class="{'active': !isBig}", @touchstart="handleZoomOut")
        i.iconfont.icon-zuixiaohua

    .ovv-wrap(ref="imgWrap")
      img.ovv-img(
        :src="getOvvImage",
        draggable="false",
        ref="imgHook",
        @touchstart="handleTouchDown",
        @touchmove="handleTouchMove",
        @touchend="handleTouchEnd",
        alt="")
</template>

<script>
  import ovvMixins from '@/mixins/ovv'
  import {
    doubleClick,
    handleDefPrevent
  } from '@/utils'

  export default {
    mixins: [ovvMixins],
    data() {
      return {
        baseLeft: 0,
        baseTop: 0,
        maxScale: 1,
        minScale: 0.95,
        isBig: false,
        isSmall: true,
        timer: null,
        isFirst: true
      }
    },
    created() {
      this.vw = document.documentElement.clientWidth
      this.vh = document.documentElement.clientHeight
    },

    mounted() {
      this.img = this.$refs.imgHook

      this.$vgo.on('listenWXLoad', () => {
        setTimeout(() => {
          this.playMusic()
        }, 1000)
      })

      this.$nextTick(() => {
        setTimeout(() => {
          this.loadImage()
          this.$store.dispatch('getOverviewWXShareData')
        }, 3000)
      })
      // 利用 CSS3 旋转 对根容器逆时针旋转 90 度
      window.onresize = this.detectOrient
      this.detectOrient()
    },
    methods: {
      detectOrient() {
        let $wrapper = document.getElementById("container"),
        style = ""
        if (this.vw >= this.vh) { // 横屏
          style += "width:" + this.vw + "px;" // 注意旋转后的宽高切换
          style += "height:" + this.vh + "px;"
          style += "-webkit-transform: rotate(0); transform: rotate(0);"
          style += "-webkit-transform-origin: 0 0;"
          style += "transform-origin: 0 0;"

        } else { // 竖屏
          style += "width:" + this.vh + "px;"
          style += "height:" + this.vw + "px;"
          style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);"
          // 注意旋转中点的处理
          style += "-webkit-transform-origin: " + this.vw / 2 + "px " + this.vw / 2 + "px;"
          style += "transform-origin: " + this.vw / 2 + "px " + this.vw / 2 + "px;"
        }
        $wrapper.style.cssText = style
      },
      resizeImage() {
        let ratio = this.img.width / this.img.height
        let sw = parseInt(this.vw / (this.img.height / this.img.width))

        if(ratio < 4/3) { // 类似正方形图
          let sh = this.img.height / (this.img.width/this.vh)
          this.img.style.width = this.vh + 'px'
          this.img.style.height = sh + 'px'

          this.baseLeft = parseInt((this.vh - this.img.width) / 2)
          this.baseTop = parseInt((this.vw - this.img.height) / 2)
        } else if(ratio < 0.5) { // 竖图片
        } else if(ratio > 2) { // 横的图片
          let sw = this.vw * (this.img.width / this.img.height)
          this.img.style.height = this.vw + 'px'
          this.img.style.width = sw + 'px'

          this.baseLeft = parseInt((this.vh - this.img.width) / 2)
          this.baseTop = parseInt((this.vw - this.img.height) / 2)
        } else {
          this.img.style.width = sw + 'px'
          this.img.style.height = this.vw + 'px'
          this.baseLeft = parseInt((this.vh - sw) / 2)
          this.baseTop = parseInt((this.vw - this.img.height) / 2)
        }

        this.img.style.top = this.baseTop + 'px'
        this.img.style.left = this.baseLeft + 'px'

        if(this.isFirst) {
          this.loadMarkers()
          this.isFirst = false
          this.isShow = true
        }
      },
      toggleZoom(e) {
        if(doubleClick(e)) {
          this.isBig ? this.handleZoomOut() : this.handleZoomIn()
        }
      },
      handleZoomIn() {
        if(this.isBig) return
        this.isBig = true
        let imgDim = this.getImageDim()
        let w0 = this.img.width
        let h0 = this.img.height
        let top = parseFloat(this.img.style.top)
        let left = parseFloat(this.img.style.left)
        let sw = this.maxScale * imgDim.w
        let sh = this.maxScale * imgDim.h
        let stepW = 0, num1 = 0

        const move = () => {
          this.baseLeft = (this.vh - parseInt(this.img.width)) / 2
          this.baseTop = (this.vw - parseInt(this.img.height)) / 2

          if(stepW < sw / 2) {
            stepW += 100
            num1 = stepW - stepW / 8
            this.img.style.height = imgDim.h + num1 + 'px'
            this.img.style.width = 'auto'
            this.img.style.left = this.baseLeft + 'px'
            this.img.style.top = this.baseTop + 'px'
            this.timer = requestAnimationFrame(move)
          } else {
            cancelAnimationFrame(this.timer)
            this.reloadMarkers()
          }
        }
        cancelAnimationFrame(this.timer)
        this.timer = requestAnimationFrame(move)

        this.isSmall = true
      },
      handleZoomOut() {
        if(!this.isSmall) return
        this.isSmall = false
        this.resizeImage()
        this.reloadMarkers()
        this.isBig = false
      },
      reloadMarkers() {
        this.markerList.map((el, index) => {
          this.setMarkerOffset(el.marker, el.param, {x: el.param.x, y: el.param.y})
        })
      },
      setMarkerOffset(marker, position) {
        let offset = this.getImagePos()
        let ratio = this.img.width / this.img.height
        let eh = this.ovvData.imageheight / (this.ovvData.imagewidth / this.ew)
        let l , t
        if(ratio < 4/3) { // 类似正方形图
          l = parseInt(this.img.width * position.x / this.ew + offset.left + this.pointObj.w /2)
          t = parseInt(this.img.height * position.y / eh + offset.top - this.pointObj.w/2)
        }else if(ratio > 2) {
          l = parseInt(this.img.width * position.x / this.ew + offset.left + this.pointObj.w /2)
          t = parseInt(this.img.height * position.y / eh + offset.top - this.pointObj.w/2)
        }
        else {
          l = parseInt(this.img.width * position.x / this.ew + offset.left - this.pointObj.w /2)
          t = parseInt(this.img.height * position.y / eh + offset.top - this.pointObj.w)
        }

        marker.style.left = l + 'px'
        marker.style.top =  t + 'px'

        this.isFinish = true
      },
      handleTouchDown(e) {
        e.preventDefault()
        let touch = e.touches[0]
        this.mousePosition.isDrag = true
        this.mousePosition.x = touch.clientX + this.img.offsetTop - Math.abs(this.baseTop)
        this.mousePosition.y = touch.clientY - this.img.offsetLeft - Math.abs(this.baseLeft)
      },
      handleTouchMove(e) {
        let touch = e.touches[0]
        if(this.mousePosition.isDrag) {
          let x = touch.clientX - this.mousePosition.x - Math.abs(this.baseTop)
          let y = touch.clientY - this.mousePosition.y - Math.abs(this.baseLeft)

          // 横屏左右拖动
          if(this.baseLeft < 0) {
            // 图片在可视区内
            if(y < this.baseLeft * 2) {
              y = this.baseLeft * 2
            } else if(y > 0) {
              y = 0
            }
            this.img.style.left = y + 'px'
          }

          if(this.baseTop < 0) {
            if(-x < this.baseTop * 2) {
              x = -this.baseTop * 2
            } else if(x < 0) {
              x = 0
            }
            this.img.style.top = -x + 'px'
          }
          this.mouse.x = x
          this.mouse.y = y
          this.reloadMarkers()
        }
      },
      handleTouchEnd(e) {
        let touch = e.changedTouches[0]

        this.mousePosition.isDrag = false
        this.mousePosition.x = touch.pageX
        this.mousePosition.y = touch.pageY
      },
      handleDragPrevent(e) {
        handleDefPrevent(e)
      }
    }
  }
</script>

<style lang="stylus">
@import '../../assets/styles/ovv.styl'
$white = #fff

.ctrl-box
  position: absolute
  right: 0
  bottom: 0
  padding: 12px
  z-index: 101
  .icon
    width: 30px
    height: 30px
    margin-top: 12px
    border-radius: 4px
    text-align: center
    background-color: rgba(#e4761c, .8)
    &.active
      background-color: #909399
    i
      font-size: 22px
      color: $white

$vw_base = 375
$vw_fontsize = 20

html
  font-size: 20px
  font-size: ($vw_fontsize / $vw_base) * 100vw


@media screen and (orientation: landscape)
  html
    font-size: 20px
    font-size: ($vw_fontsize / $vw_base) * 100vh

</style>
